<template>
  <view class="cardinfo-page">
    <u--form labelWidth="260rpx" labelPosition="top" :model="formInfo" :rules="rules" ref="formRefInfo">
      <u-form-item required label="手机号" prop="mobile">
        <view class="input">
          <u--input v-model="formInfo.mobile" type="number" maxlength="11" placeholder="请输入" border="none"></u--input>
        </view>
      </u-form-item>
      <!-- <u-form-item required label="图形验证码" prop="code">
	      <view class="phone-input">
	        <view class="input">
	          <u--input v-model="cardInfo.code" type="number" maxlength="4" placeholder="请输入" border="none"></u--input>
	        </view>
	        <view class="image-code">
	          <view class="loading" v-if="loading">
	            <u-loading-icon mode="semicircle"></u-loading-icon>
	          </view>
	          <image :src="imageCode" @click="onImageCode" @load="onImageLoad" class="codeiocn" />
	        </view>
	      </view>
	    </u-form-item> -->
      <u-form-item required label="短信验证码" prop="code">
        <view class="phone-input">
          <view class="input">
            <u--input v-model="formInfo.code" maxlength="4" placeholder="请输入" border="none"></u--input>
          </view>
          <view class="code" :class="{disabled:codeDisabled}" @click="getCode">{{ phoneCode }}</view>
        </view>
      </u-form-item>
    </u--form>
    <b-button :loading="buttonLoading" @change="submitInfo" style="margin-top: 30rpx;">
      <text class="button_t">提交</text>
    </b-button>
    <u-code :seconds="seconds" start-text="发送验证码" @end="end" @start="start" ref="uCodeRef" @change="codeChange"></u-code>
  </view>
</template>

<script setup>
import { ref, reactive } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { globalStore } from "@/store";
const gStore = globalStore();
const emit = defineEmits(["success"]);
var rules = reactive({
  mobile: [
    {
      required: true,
      message: "请输入联系人手机号",
      trigger: ["change", "blur"],
    },
    {
      // 自定义验证函数，见上说明
      validator: (rule, value, callback) => {
        return uni.$u.test.mobile(value);
      },
      message: "手机号码不正确",
      // 触发器可以同时用blur和change
      trigger: ["blur"],
    },
  ],
  code: {
    type: "string",
    required: true,
    message: "请填写短信验证码",
    trigger: ["blur", "change"],
  },
});
const formInfo = ref({
  mobile: "",
  code: "",
  openid: gStore.openid,
});
const typeHome = ref(null);
const formRefInfo = ref(null);
const buttonLoading = ref(false);
const phoneCode = ref("");
const seconds = ref(60);
const codeDisabled = ref(false);
const uCodeRef = ref(null);
const loading = ref(false);
const imageCode = ref(
  "http://api.cddzixun.com/common/build/image/code?w=115&h=48"
);
onLoad((options) => {
  typeHome.value = options.type;
});
const onImageCode = () => {
  loading.value = true;
  imageCode.value =
    "http://api.cddzixun.com/common/build/image/code?w=115&h=48&time=" +
    new Date().getTime();
};
const submitInfo = () => {
  formRefInfo.value
    .validate()
    .then(async (res) => {
      buttonLoading.value = true;
      var _res = await saveBindMobile();
      buttonLoading.value = false;
      if (_res) {
        emit("success", _res);
      }
    })
    .catch((errors) => {
      buttonLoading.value = false;
      console.log(errors);
    });
};
// 保存绑定手机号
const saveBindMobile = () => {
  return new Promise((resolve, reject) => {
    uni.$request
      .service({
        url: "/bind",
        method: "POST",
        data: formInfo.value,
      })
      .then((res) => {
        resolve(res);
      })
      .catch((err) => {
        codeDisabled.value = false;
        reject(err);
      });
  });
};
// 发送短信
const smsSend = (type) => {
  return new Promise((resolve, reject) => {
    uni.$request
      .service({
        url: "/sms/send",
        method: "POST",
        data: {
          type,
          mobile: formInfo.value.mobile,
        },
      })
      .then((res) => {
        resolve(res);
      })
      .catch((err) => {
        codeDisabled.value = false;
        reject(err);
      });
  });
};
const onImageLoad = () => {
  loading.value = false;
};

const codeChange = (text) => {
  phoneCode.value = text;
};

const getCode = async () => {
  if (uni.$u.test.isEmpty(formInfo.value.mobile)) {
    uni.$u.toast("手机号码不能为空");
    return;
  }
  if (!uCodeRef.value.canGetCode) {
    return;
  }
  codeDisabled.value = true;
  await smsSend(1);
  // 这里此提示会被start()方法中的提示覆盖
  uni.$u.toast("验证码已发送");
  // 通知验证码组件内部开始倒计时
  uCodeRef.value.start();
};
const start = () => {};
const end = () => {
  codeDisabled.value = false;
};
</script>
<style lang="scss">
.cardinfo-fail {
  background-color: #ffe4e3;
  display: flex;
  align-items: center;
  padding: 20rpx 40rpx;
  .fail {
    width: 44rpx;
    height: 44rpx;
    margin-right: 16rpx;
  }
  .text {
    font-size: 28rpx;
    color: #232f3f;
  }
}
.cardinfo-page {
  padding: 0 30rpx;
  .phone-input {
    flex: 1;
    display: flex;
  }
  .code {
    color: #fe9900;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 22rpx;
    border-radius: 16rpx;
    margin-left: 20rpx;
    border: 2rpx solid #fe9900;
  }
  .image-code {
    width: 208rpx;
    margin-left: 20rpx;
    display: flex;
    align-items: center;
    position: relative;
    // background-color: #eee;
    .loading {
      position: absolute;
      left: 0;
      bottom: 0;
      right: 0;
      background-color: rgba($color: #ffffff, $alpha: 0.5);
      top: 0;
      display: flex;
      z-index: 999;
      justify-content: center;
      align-items: center;
    }
    .codeiocn {
      width: 208rpx;
      height: 80rpx;
    }
  }
  .code.disabled {
    color: #d3dce6;
    border: 2rpx solid #d3dce6;
  }
  .input {
    flex: 1;
    padding: 20rpx 20rpx;
    background-color: #fff;
    border: 2rpx solid #d3dce6;
    border-radius: 16rpx;
  }
}
.button_t {
  font-size: 32rpx;
  color: #fff;
}
</style>
